<template>
  <div ref="chart1" :style="{ width: '100%', height: '535px' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { reqIndexAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any

let legend = ref([])
let xData = ref([])
let pe = ref([])
let pb = ref([])
let ps = ref([])
let pc = ref([])
const init = async () => {
  let res = await reqIndexAPI()
  legend.value = res.result.legend
  xData.value = res.result.x
  pe.value = res.result.y2.pe
  pb.value = res.result.y2.pb
  ps.value = res.result.y2.ps
  pc.value = res.result.y2.pc
  // console.log(legend.value,xData.value,yData1.value,yData2.value)
}

onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      backgroundColor: '#394056',
      title: {
        text: '深物业A',
        textStyle: {
          fontWeight: 'normal',
          fontSize: 18,
          color: '#F1F1F3',
        },
        left: '6%',
      },
      tooltip: {
        trigger: 'axis',
        show: true,
      },
      legend: {
        show: true,
        icon: 'circle',
        top: 20,
        textStyle: {
          fontSize: 12,
          color: '#c8c8c8',
        },
      },
      grid: {
        left: '5%',
        right: '5%',
        top: '15%',
        bottom: '6%',
        containLabel: true,
      },
      xAxis: {
        axisLine: {
          lineStyle: {
            color: '#F1F1F3', //坐标轴线线的颜色。
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        data: xData.value,
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: '#F1F1F3', //坐标轴线线的颜色。
          },
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: legend.value[0],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 13,
          lineStyle: {
            normal: {
              width: 3,
              shadowColor: 'rgba(155, 18, 184, .4)',
              shadowBlur: 5,
              shadowOffsetY: 20,
              shadowOffsetX: 0,
              color: '#fb7636',
            },
          },
          itemStyle: {
            color: '#fb7636',
            borderColor: '#fff',
            borderWidth: 2,
          },

          data: pe.value,
        },
        {
          name: legend.value[1],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 13,
          lineStyle: {
            normal: {
              width: 3,
              shadowColor: 'rgba(155, 18, 184, .4)',
              shadowBlur: 5,
              shadowOffsetY: 20,
              shadowOffsetX: 0,
              color: '#24b314',
            },
          },
          itemStyle: {
            color: '#24b314',
            borderColor: '#fff',
            borderWidth: 2,
          },

          data: pb.value,
        },
        {
          name: legend.value[2],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 13,
          lineStyle: {
            normal: {
              width: 3,
              shadowColor: 'rgba(155, 18, 184, .4)',
              shadowBlur: 5,
              shadowOffsetY: 20,
              shadowOffsetX: 0,
              color: '#027ad7',
            },
          },
          itemStyle: {
            color: '#027ad7',
            borderColor: '#fff',
            borderWidth: 2,
          },

          data: ps.value,
        },
        {
          name: legend.value[3],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 13,
          lineStyle: {
            normal: {
              width: 3,
              shadowColor: 'rgba(155, 18, 184, .4)',
              shadowBlur: 5,
              shadowOffsetY: 20,
              shadowOffsetX: 0,
              color: '#8452e7',
            },
          },
          itemStyle: {
            color: '#8452e7',
            borderColor: '#fff',
            borderWidth: 2,
          },

          data: pc.value,
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style></style>
